import { defineStore } from 'pinia'
import type { MenuOption } from 'naive-ui'
import {
  TimeOutline as TimerIcon,
  CalculatorOutline as CalculatorIcon,
  WaterOutline as DrinkIcon,
  ListOutline as TodoIcon,
  AddCircleOutline as CounterIcon,
} from '@vicons/ionicons5'
import { h, markRaw, defineAsyncComponent } from 'vue'

// 动态导入组件
const BMICalculator = defineAsyncComponent(() => import('@/components/BMICalculator.vue'))
const CountDown = defineAsyncComponent(() => import('@/components/CountDown.vue'))
const Counter = defineAsyncComponent(() => import('@/components/Counter.vue'))
const WineTime = defineAsyncComponent(() => import('@/components/WineTime.vue'))
const TodoList = defineAsyncComponent(() => import('@/components/TodoList.vue'))

export const useComponentStore = defineStore('components', {
  state: () => ({
    // 组件映射
    componentMap: {
      bmi: markRaw(BMICalculator),
      countdown: markRaw(CountDown),
      counter: markRaw(Counter),
      drink: markRaw(WineTime),
      todo: markRaw(TodoList),
    },
    // 当前选中的组件
    currentComponent: 'counter',
    // 菜单配置
    menuItems: [
      {
        label: '计数器',
        key: 'counter',
        icon: () => h(CounterIcon),
      },
      {
        label: '倒计时',
        key: 'countdown',
        icon: () => h(TimerIcon),
      },
      {
        label: 'BMI 计算器',
        key: 'bmi',
        icon: () => h(CalculatorIcon),
      },
      {
        label: '喝酒游戏',
        key: 'drink',
        icon: () => h(DrinkIcon),
      },
      {
        label: '待办清单',
        key: 'todo',
        icon: () => h(TodoIcon),
      },
    ] satisfies MenuOption[],
  }),
  getters: {
    currentComponentInstance: (state) =>
      state.componentMap[state.currentComponent as keyof typeof state.componentMap],
  },
  actions: {
    setCurrentComponent(key: string) {
      if (key in this.componentMap) {
        this.currentComponent = key
      }
    },
  },
})
